<style>
    .layui-input-inline{margin-top:10px;}
</style>
<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>代理商</cite></a>
        <a><cite>资金流水</cite></a>
    </span>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">资金流水列表</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-row">

                    <form action="" id="exportForm" method="post">
                        <input name="Authorization" id='exportHiddenInput' type="hidden"/>
                        <div class="layui-form" style="float:right;">
                            <div class="layui-form-item" id="timeDiv" style="margin:0;">
                                <div class="layui-input-inline">
                                    <input type="text" name="orderId" id="searchOrderId" placeholder="业务单号" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-input-inline">
                                    <select name="fundDirection" id="searchFundDirection" lay-search="">
                                        <option value="">资金变动方向</option>
                                        <option value="1">加款</option>
                                        <option value="2">减款</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="bizType" id="searchBizType" lay-search="">
                                        <option value="">业务类型</option>
                                        <option value="1">分润</option>
                                        <option value="2">提现</option>
                                        <option value="3">调账</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="bizItem" id="searchBizItem" lay-search="">
                                        <option value="">业务类目</option>
                                        <option value="20">支付</option>
                                        <option value="21">代付</option>
                                        <option value="22">线下充值</option>
                                        <option value="23">线上充值</option>
                                        <option value="10">余额</option>
                                        <option value="11">代付余额</option>
                                        <option value="12">冻结金额</option>
                                        <option value="13">保证金</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <a id="search" class="layui-btn" data-type="reload"><i class="layui-icon layui-icon-search"></i>搜索</a>
                                    <button type="submit" class="layui-btn"><i class="layui-icon layui-icon-download-circle"></i>导出</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-form-item" style="margin-top: 10px;margin-bottom: 0;">
                    <blockquote class="layui-elem-quote" id="amountTip">
                        总金额:<span id="totalAmount" style="color: green; margin-right: 10px;"></span>
                    </blockquote>
                </div>
                <table id="zjlsList" lay-filter="zjlsList"></table>
            </div>
        </div>
    </div>
</div>
<script>
     //标题内容模板
     var tplTitle = function(d){
         return '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"><i class="layui-icon layui-icon-about"></i>查看</a>';
     };


     layui.use(['table', 'util', 'form', 'timePick', 'admin'], function(){
        var table = layui.table
        ,$ = layui.$
        ,admin = layui.admin
        ,form = layui.form
        ,timePick = layui.timePick
        ,element = layui.element
        ,view = layui.view;

        timePick.init();  //第一个参数表示开始时间   第二个表示结束时间   0,0今天   -1,-1昨天   -7,0近一周   以此类推
        element.render('breadcrumb', 'breadcrumb');//渲染导航信息

         $.setCountResult = function(orderId, fundDirection, bizType, bizItem, createTimeStart, createTimeEnd) {
             admin.req({
                 type: 'get',
                 url: layui.setter.baseUrl + '/account/count',
                 data: {
                     orderId : orderId,
                     fundDirection : fundDirection,
                     bizType: bizType,
                     bizItem: bizItem,
                     createTimeStart : createTimeStart,
                     createTimeEnd : createTimeEnd
                 },
                 error: function(err){
                     layer.alert(JSON.stringify(err.field), {
                         title: '错误提示'
                     })
                 },
                 success: function(res){
                     if(res.code == 0){
                         $('#totalAmount').html("￥" + res.data.totalAmount/100.00);
                     }
                 }
             });
         };

         //导出参数初始化
         var tokenParamsName = layui.setter.request.tokenName;
         $('#exportHiddenInput').attr('name', tokenParamsName).val(layui.data(layui.setter.tableName)[tokenParamsName]);
         $('#exportForm').attr('action' , layui.setter.baseUrl+'/account/exportExcel');

         var tplAmount = function(d){
             if(d.fundDirection == 1) {
                 return "<span style='color: darkgreen'>+ " + d.amount/100 + "</span>";
             }else if(d.fundDirection == 2) {
                 return "<span style='color: orangered'>- " +  d.amount/100 + "</span>";
             }
         };


         // 初始化统计结果
         var createTimeStart = $('#createTimeStart').val();
         var createTimeEnd = $('#createTimeEnd').val();
         var orderId = $('#searchOrderId').val();
         var fundDirection = $("#searchFundDirection").val();
         var bizType = $("#searchBizType").val();
         var bizItem = $("#searchBizItem").val();
         $.setCountResult(orderId, fundDirection, bizType, bizItem, createTimeStart, createTimeEnd);

        table.render({
            elem: '#zjlsList'
            ,url: layui.setter.baseUrl + '/account/history_list'
            ,where: {
                access_token: layui.data(layui.setter.tableName).access_token,
                createTimeStart: createTimeStart,
                createTimeEnd: createTimeEnd
            }
            ,id: 'tableReload'
            ,cols: [[
                {field: 'balance', title: '变更前余额(元)', templet: '<div>{{d.balance/100}}</div>'}
                ,{field: 'amount', title: '变更金额(元)', templet: tplAmount}
                ,{field: 'afterBalance',title: '变更后余额(元)', templet: '<div>{{d.afterBalance/100}}</div>'}
                ,{field: 'bizType', title: '业务类型', templet: '<div>{{d.bizType == 1?"分润":d.bizType == 2?"提现":d.bizType == 3?"调账":""}}</div>'}
                ,{field: 'bizItem', title: '业务类目', templet: '<div>{{d.bizItem == 10?"余额":d.bizItem == 20?"支付":d.bizItem == 21?"代付":d.bizItem == 22?"线下充值":d.bizItem == 23?"线上充值":""}}</div>'}
                ,{field: 'orderId', title: '业务订单' ,width: 270}
                ,{field: 'createTime', width: 200,  title: '时间', templet: '<div>{{ layui.util.toDateString(d.createTime) }}</div>' }
                ,{field: 'edite', width: 100, title: '操作', templet: tplTitle }
            ]]
            ,page: true
            ,skin: 'line'
        });

         //监听工具条
         table.on('tool(zjlsList)', function(obj){
             var data = obj.data;
             if(obj.event === 'detail'){
                 view.xxpayPopup("查看详情", "account/history/detail", {id: data.id}, {btn: false, area:['75%', '70%']});
             }
         });

        // 搜索
        var $ = layui.$, active = {
            reload: function(){
                var createTimeStart = $('#createTimeStart').val();
                var createTimeEnd = $('#createTimeEnd').val();
                var orderId = $('#searchOrderId').val();
                var fundDirection = $("#searchFundDirection").val();
                var bizType = $("#searchBizType").val();
                var bizItem = $("#searchBizItem").val();

                $.setCountResult(orderId, fundDirection, bizType, bizItem, createTimeStart, createTimeEnd);

                //执行重载
                table.reload('tableReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        orderId: orderId,
                        fundDirection: fundDirection,
                        createTimeStart : createTimeStart,
                        createTimeEnd : createTimeEnd,
                        bizType : bizType,
                        bizItem : bizItem
                    }
                });
            }
        };
        $('#search').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            return false;
        });

        // 渲染表单
        form.render();


     })
</script>